<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css"  media="screen,projection"/>-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <title>设置</title>
    <style type="text/css">
        body{
            background-color: whitesmoke;
        }
        html {
            font-family: GillSans, Calibri, Trebuchet, sans-serif;
        }
        /*.nav-left{*/
            /*padding-left: 82px;*/
        /*}*/
        nav{
            position: fixed;
            top: 0px;
            z-index: 5;
        }
        #logo{
            padding-left: 18px;
        }
        #sidenav-overlay{
            z-index: 0;
        }
    </style>
    <title>设置</title>
</head>
<body>
<nav>
    <div class="nav-wrapper blue">
        <a href="information.html" class="brand-logo" id="logo">呜呼</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="hide-on-med-and-down " style="margin-left: 82px">
            <li><a href="../index.html">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="writequestion.html">提问</a></li>
        </ul>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="contact.html"><i class="material-icons">chat_bubble_outline</i></a></li>
            <li><a href="personalcenter.html"><i class="material-icons">perm_identity</i></a></li>
            <li><a href="#" data-activates="slide-out" id="sidenav"><i class="material-icons">more_vert</i></a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo" style="z-index: 10000">
            <li><a href="../index.html">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">话题</a></li>
            <li><a href="writequestion.html">提问</a></li>
            <li><a href="contact.html">联系人</a></li>
            <li><a href="personalcenter.html">个人中心</a></li>
            <li><a href="setting.html">设置</a></li>
        </ul>
    </div>
</nav>
<div style="margin-top: 100px">
    <ul id="slide-out" class="side-nav">
        <li><div class="userView">
            <a href="#!user"><img class="circle" src="../../public/img/1.jpg"></a>
            <a href="#!name"><span class="black-text name">name</span></a>
            <a href="#!email"><span class="black-text">个性签名</span></a>
        </div></li>
        <div id="leftnavbar">
            <li><a href="#onetab" class="waves-effect"><i class="material-icons">perm_identity</i>账户与密码</a></li>
            <li><a href="#twotab" class="waves-effect"><i class="material-icons">contacts</i>消息与邮件</a></li>
            <li><a href="#threetab" class="waves-effect"><i class="material-icons">not_interested</i>屏蔽</a></li>
            <li><a href="#fourtab" class="waves-effect"><i class="material-icons">lock</i>隐私</a></li>
            <li><a href="#fivetab" class="waves-effect"><i class="material-icons">settings</i>偏好设置</a></li>
        </div>
    </ul>
    <div class="container" id="onetab">
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>账户与密码</h5>
                        <p class="blue-grey-text">帐户设置/个性域名</p>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>账户设置</h5>
                        <p class="blue-grey-text">帐户设置/绑定手机和邮箱，并设置密码，帐号更安全
                            注意：为保证帐号安全，需进行二次验证。</p>
                        <div class="row">
                            <div class="col offset-s1 s11">
                                <div class="divider"></div>
                            </div>
                            <div class="col offset-s1 s5">
                                <h6>密码</h6>
                                <span class="grey-text">已设置</span>
                            </div>
                            <!--<i class="material-icons right" style="display: inline;margin-top: 10px">mode_edit</i>-->
                            <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: 10px;margin-right: 10px;">编辑</a>
                            <div class="col offset-s1 s11">
                                <div class="divider"></div>
                            </div>
                            <div class="col offset-s1 s5">
                                <h6>绑定手机</h6>
                                <span class="grey-text">15858262021</span>
                            </div>
                            <!--<i class="material-icons  right" style="display: inline;margin-top: 10px">mode_edit</i>-->
                            <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: 10px;margin-right: 10px;">编辑</a>
                            <div class="col offset-s1 s11">
                                <div class="divider"></div>
                            </div>
                            <div class="col offset-s1 s5">
                                <h6>绑定第三方账号</h6>
                                <span class="grey-text">暂无</span>
                            </div>
                            <!--<i class="material-icons  right" style="display: inline;margin-top: 10px">mode_edit</i>-->
                            <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: 10px;margin-right: 10px;">编辑</a>
                        </div>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>个性域名</h5>
                        <!--<i class="material-icons  right" style="display: inline;margin-top: -5px">mode_edit</i>-->
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -5px">编辑</a>
                        <p class="blue-grey-text">个人主页的地址，个性域名只可更改一次
                            zhihu.com/people/enoch-48-22</p>

                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
    </div>

    <div id="twotab" class="container">
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>消息与私信</h5>
                        <p class="blue-grey-text">私信设置/邀请设置/赞同与赞赏/关注/邮件设置</p>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>私信设置</h6>
                        <div>
                            <p class="blue-grey-text col s12 m6">允许谁给我发私信</p>
                            <a class="waves-effect waves-light btn-flat right light-blue-text col s12 m6" style="display: inline;margin-top: -50px">编辑</a>
                        </div>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>邀请消息设置</h6>
                        <p class="blue-grey-text col s10">有人对我发出</p>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -50px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>赞同/赞赏消息设置</h6>
                        <p class="blue-grey-text">有人对我赞同或赞赏时，我会收到消息通知</p>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -50px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>关注消息设置</h6>
                        <p class="blue-grey-text">我的关注内容有新动态时，我会收到消息通知</p>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -50px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>邮件设置</h6>
                        <p class="blue-grey-text">重要事件发生时，我将会收到邮件提醒</p>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -50px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
    </div>

    <div id="threetab" class="container">
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>屏蔽</h5>
                        <p class="blue-grey-text">用户黑名单/话题黑名单/不看他的动态</p>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>用户黑名单</h6>
                        <p class="blue-grey-text">查看或撤销已屏蔽用户</p>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -50px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>话题黑名单</h6>
                        <p class="blue-grey-text">查看或撤销已屏蔽话题</p>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -50px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h6>不看他的动态</h6>
                        <p class="blue-grey-text">屏蔽已关注用户的动态</p>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -50px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
    </div>


    <div id="fourtab" class="container">
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>隐私</h5>
                        <p class="blue-grey-text">隐私保护</p>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>隐私保护</h5>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -35px">编辑</a>
                        <div class="">
                            <div class="col offset-s1 s11">
                                <div class="divider"></div>
                            </div>
                            <div class="col offset-s1 s5">
                                <h6>在站外隐藏个人信息</h6>
                                <input type="checkbox" class="button-wrap right">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
    </div>

    <div id="fivetab" class="container">
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>偏好设置</h5>
                        <p class="blue-grey-text">图片水印/首页新动态</p>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
        <div class="">
            <div class="col offset-s2 s8 offset-m2 m8 l8 offset-l2">
                <div class="card darken-1">
                    <div class="card-content black-text">
                        <!--<span class="card-title">账户与密码</span>-->
                        <h5>图片水印</h5>
                        <h6>在我上传的图片上显示水印</h6>
                        <a class="waves-effect waves-light btn-flat right light-blue-text" style="display: inline;margin-top: -55px">编辑</a>
                    </div>
                </div>
                <div class="divider" style="margin-top: -44px"></div>
            </div>
        </div>
    </div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script type="text/javascript" src="materialize/js/materialize.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script>
        $(document).ready(function(){
            $("#sidenav").sideNav();
            $(".button-collapse").sideNav({draggable: true});
            $("#leftnavbar").on("click",function () {
                $('.button-collapse').sideNav('hide');
            });
        });
</script>
</body>
</html>